<template>
    <BaseDialog v-model="dialogVisible" :title="title" :width="700" :before-close="handleClose">
        <el-form ref="refDialogForm" class="set-dialog-form" :label-width="language === 'en' ? '180px' : '80px'"
            :model="formData" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="$t('public.date')" prop="tripDate" required>
                        <Date v-model="formData.tripDate" style="width: 100%" :default-time="new Date(2025, 1, 1)"
                            :label="$t('public.date')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('travelAgency.tripDay')" required prop="tripDay">
                        <TextInput v-model="formData.tripDay"
                            :placeholder="$t('public.pleaseInput') + $t('travelAgency.tripDay')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.trip')" required prop="trip">
                        <TextInput v-model="formData.trip" type="textarea" clearable :rows="3"
                            :placeholder="$t('public.pleaseInput') + $t('travelAgency.trip')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.meal')">
                        <TextInput v-model="formData.meal"
                            :placeholder="$t('public.pleaseInput')  + $t('public.desc')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.hotel')">
                        <TextInput v-model="formData.hotel"
                            :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.car')">
                        <TextInput v-model="formData.car" :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.play')">
                        <TextInput v-model="formData.play"
                            :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.shop')">
                        <TextInput v-model="formData.shop"
                            :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.enjoy')">
                        <TextInput v-model="formData.enjoy"
                            :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('travelAgency.other')">
                        <TextInput v-model="formData.other"
                            :placeholder="$t('public.pleaseInput') + $t('public.desc')" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="form-dialog-footer">
                <el-button plain @click="handleClose">{{
                    $t('public.cancel')
                    }}</el-button>
                <el-button type="primary" @click="handleSubmitForm">{{
                    $t('public.confirm')
                    }}</el-button>
            </div>
        </template>
    </BaseDialog>
</template>

<script setup>
const props = defineProps({
    type: {
        type: String,
        default: 'add' // add | edit
    },
    id: {
        type: String,
        default: ''
    },
    editData: {
        type: Object,
        default: null
    }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
    type: Boolean,
    default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() =>
    props.type === 'add' ? g_t('public.create') : g_t('public.edit')
)

const refDialogForm = ref(null)
const formData = ref({
    "tripDate": "",
    "tripDay": "",
    "trip": "",
    "meal": "",
    "hotel": "",
    "car": "",
    "play": "",
    "shop": "",
    "enjoy": "",
    "other": "",
    "rowId": ""
})

const rules = {
    tripDate: g_rules.selectRule(g_t('public.date')),
    tripDay: g_rules.commonInputText(g_t('travelAgency.tripDay')),
    trip: g_rules.commonInputText(g_t('travelAgency.trip'))
}

onMounted(async () => {
    if (props.type === 'add') {
        formData.value = {
            "tripDate": "",
            "tripDay": "",
            "trip": "",
            "meal": "",
            "hotel": "",
            "car": "",
            "play": "",
            "shop": "",
            "enjoy": "",
            "other": "",
            "rowId": ""
        }
    } else {
        getFormData(props.editData)
    }
})

const getFormData = (row) => {
    // 转换数据
    formData.value = {
        tripDate: row.tripDate || '',
        tripDay: row.tripDay || '',
        trip: row.trip || '',
        meal: row.meal || '',
        hotel: row.hotel || '',
        car: row.car || '',
        play: row.play || '',
        shop: row.shop || '',
        enjoy: row.enjoy || '',
        other: row.other || '',
        rowId: row.rowId || ''
    }
}

const handleClose = () => {
    dialogVisible.value = false
}


const handleSubmitForm = () => {
    refDialogForm.value.validate(valid => {
        if (!valid) return

        // 为新增的数据生成不重复的rowId
        if (props.type === 'add') {
            // 生成一个基于时间戳和随机数的唯一ID
            formData.value.rowId = 'row_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)

            console.log('表单数据', formData.value)

            ElMessage({
                message: g_t('public.add') + g_t('public.success'),
                type: 'success'
            })
            handleClose()
            emit('add', formData.value)
        } else {
            console.log('表单数据', formData.value)
            ElMessage({
                message: g_t('public.edit') + g_t('public.success'),
                type: 'success'
            })
            handleClose()
            emit('update', formData.value)
        }
    })
}
</script>

<style scoped lang="scss"></style>